<template>
	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-pink" :isBack="true">
			<block class="text-white" slot="content">课程详细</block>
		</cu-custom>
		<!-- 课程基本信息 -->
		<view>
			<!-- 课程封面 -->
			<view class="flex relative">
				<image class="flex-sub" :src="akecheng.cover" mode="aspectFill"></image>
				<view class="absolute bg-red top0 left0 padding-xs">
					<text class="text-sm">{{kczt[akecheng.zt]}}</text>
				</view>
			</view>
			<view class="solid-bottom">
				<view class="cu-form-group">
					<view class="text-gray title">课程名</view>
					<input class="text-right "  v-model="akecheng.kcname" placeholder="请输入课程名" />
					<!-- <text class="cuIcon-right text-gray"></text> -->
				</view>
			</view>
			<view class="solid-bottom">
				<view class="cu-form-group">
					<view class="text-gray title">最小人数</view>
					<input class="text-right"  v-model="akecheng.zxrs" placeholder="请输入最小人数" />
					<!-- <text class="cuIcon-right text-gray"></text> -->
				</view>
			</view>
			<view class="solid-bottom">
				<view class="cu-form-group">
					<view class="text-gray title">价格</view>
					<input class="text-right" disabled v-model="akecheng.price" placeholder="请输入价格" />
					<!-- <text class="cuIcon-right text-gray"></text> -->
				</view>
			</view>
			<view class="solid-bottom">
				<view class="cu-form-group">
					<view class="text-gray title">最大人数</view>
					<input class="text-right"  v-model="akecheng.zdrs" placeholder="请输入最大人数" />
					<!-- <text class="cuIcon-right text-gray"></text> -->
				</view>
			</view>
			<view class="solid-bottom">
				<view class="cu-form-group">
					<view class="text-gray title">课程类型</view>
					<view class="text-right text-gray">
						<text>{{akechenglxs.lxname}}</text>
						<!-- <text class="cuIcon-right "></text> -->
					</view>

				</view>
			</view>
		</view>
		<view v-if="akecheng.zt == 'B'" class="padding">
			<button @click="save" class="cu-btn block bg-pink lg">保存</button>
		</view>
		<view>
			<!-- 报名学员 
			<view class="bg-white margin-top-sm">
				<view class="padding solid-bottom flex justify-start">
					<view class="text-gray title">
						<text>报名学员</text>
						<view class="cu-tag bg-red round margin-left-sm">{{xys.length}}</view>
					</view>
				</view>
				<view class="grid col-3">
					<view class="padding-sm" v-for="(hy,index) in xys" :key="index">
						<view class="bg-cyan shadow round">
							<view class="flex justify-center flex-direction align-center">
								<view class="cu-avatar xl round" :style="'background-image:url('+hy.headimg+');'">
								</view>
								<view class="padding-sm">{{hy.nc}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 报名学员结束 -->

			

			<!-- 课程章节开始-->
			<view class="bg-white margin-top-sm">
				<view class="padding solid-bottom flex justify-between">
					<view class="text-gray title">
						<text>课程章节</text>
						<view class="cu-tag bg-red round margin-left-sm">{{akechengitems.length}}</view>
					</view>
				</view>
				<view class="bg-white">
					<view class="padding-sm" v-for="(kcitem, index) in akechengitems" :key="index">
						<view class="shadow bg-white padding-sm relative">

							<view class="padding-sm">
								<text class="cuIcon-home">门店：</text>
								<text>{{kcitem.sname}}</text>
							</view>
							<view class="padding-sm">
								<text class="cuIcon-exit">房间：</text>
								<text>{{kcitem.rname}}</text>
							</view>
							<view class="padding-sm">
								<text class="cuIcon-calendar">时段：</text>
								<text class="margin-right-xs">{{kcitem.dt}}</text>
								<text class="margin-right-xs">{{kcitem.st}}</text>
								<text class="margin-right-xs">{{kcitem.et}}</text>
							</view>
							<view class="padding-sm flex justify-start">
								<text class="cuIcon-text">内容：</text>
								<text>{{kcitem.itemname}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="padding bg-white" v-html="akecheng.ms"></view>
		</view>
		<!-- 课程章节结束 -->
		<!-- 报名列表开始 -->
		<view class="bg-white margin-top-sm">
			<view class="padding solid-bottom flex justify-between">
				<view class="text-gray">
					<text>报名列表</text>
					<view class="cu-tag bg-red round margin-left-sm">{{aclientbms.length}}</view>
				</view>
			</view>
			<view class="padding-bottom-sm">
				<view v-for="(bm, index) in aclientbms" :key="index">
					<view class="margin-sm shadow bg-white padding-xs">
						<view class="padding-xs">
							<text>学员名称：{{bm.khnc ? bm.khnc : "未设置昵称"}}</text>
						</view>
						<view class="padding-xs flex justify-between align-center">
							<text>{{bm.ct}}</text>
							<text class="text-red">￥{{bm.price / 100}}</text>
						</view>
						<view v-if="bm.fxjlid" class="padding-xs flex justify-between">
							<text>当前报名有推荐奖励</text>
						</view>
						<view class="padding-xs flex justify-end">
							<text>
								<text class="text-red" v-if="bm.stu == 'P'">排队中（{{bm.sort}}）</text>
								<text class="text-green" v-if="bm.stu == 'B'">已报名</text>
								<text class="text-green" v-if="bm.stu == 'S'">已开始</text>
								<text class="text-red" v-if="bm.stu == 'F'">已结束</text>
								<text class="text-red" v-if="bm.stu == 'R'">提款中</text>
								<text class="text-green" v-if="bm.stu == 'T'">已提款</text>
								<text class="text-red" v-if="bm.stu == 'C'">已取消</text>
								<text class="text-green" v-if="bm.stu == 'J'">退款中</text>
								<text class="text-red" v-if="bm.stu == 'E'">已退款</text>
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 报名列表结束 -->

		

		<view v-if="akecheng.zt == 'B'" class="padding ">
			<button @click="cancel" class="cu-btn block bg-red lg">取消</button>
		</view>
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				kczt: this.constant.kczt.KCZT,
				akecheng: {},
				akechengitems: [],
				akechenglxs: [],
				aclientbms: [],
				xys: [],

			};
		},

		onLoad: function(option) {
			this.akecheng.kcid = option.kcid;
			this.loadCourseDetail();
		},

		methods: {
			loadCourseDetail() {
				this.api('/kc/info/get').send({
					kcid: this.akecheng.kcid,
				}).then(data => {
					this.akecheng = data.akecheng;
					this.akechenglxs = data.akechenglx;
					this.aclientbms = data.aclientbms;
					this.akechengitems = data.kechengitems;
					this.xys = data.clients;
				});
			},

			save: function() {
				return this.api("/kc/info/put").send({
					akecheng: this.akecheng
				}).then(data => {
					this.message.info("保存成功");
					uni.navigateBack();
				});
			},

			cancel: function() {
				this.api("/kc/cancel").send({
					akecheng: this.akecheng
				}).then(data => {
					this.message.info("取消课程成功");
					this.akecheng = data.kecheng;
				});
			},

		}
	}
</script>

<style scoped>
	.relative {
		position: relative;
	}

	.absolute {
		position: absolute;
	}

	.topright {
		top: 10rpx;
		right: 10rpx;
	}
</style>